<!--
 * @Description: 
 * @Date: 2023-04-14 10:45:48
 * @LastEditors: czp
 * @LastEditTime: 2023-04-14 16:25:09
-->
<template>
	<div>
		<div class="point-box">
			<div class="btn-box">
				<div class="btn-box-item">
					<el-button
						v-for="(item, index) in goodsList"
						:key="item.id"
						@click="
							activeCategory = index;
							getGoodsList();
						"
						:class="['btn', { active: activeCategory == index }]"
						round
					>
						{{ item.name }}
					</el-button>
				</div>

				<div class="my-points">
					我的积分：<span>{{ userInfo.usableIntegral }}</span>
				</div>
			</div>

			<div class="goods-list">
				<div class="content-box">
					<div class="content-item" @click="clickGoods(item)" v-for="(item, index) in goodsList[activeCategory]?.list as IPointsGoods[]" :key="index">
						<el-image :src="item.coverImage" fit="cover"></el-image>
						<div class="title-box">
							<p>{{ item.name }}</p>
							<div class="title-btn-box">
								<p>{{ item.integral }} <span>积分</span></p>
								<el-button round size="small">立即兑换</el-button>
							</div>
						</div>
					</div>
				</div>
				<pagination
					:handle-size-change="getGoodsList"
					:handle-current-change="getGoodsList"
					:pageable="{ page: goodsList[activeCategory]?.page, rows: goodsList[activeCategory]?.rows, total: goodsList[activeCategory]?.total }"
				/>
			</div>
		</div>

		<place-an-order-dialog :goods="activeGoods" ref="placeOrderRef" />
	</div>
</template>

<script setup lang="ts" name="PointsMall">
import { IDictI } from "@/service/interface/base";
import { IPointsGoods } from "@/service/interface/points";
import { pointsGetPointsGoodsCategory, pointsGetPointsGoodsList } from "@/service/modules/points";
import { useUserStore } from "@/store/user";
import PlaceAnOrderDialog from "./PlaceAnOrderDialog.vue";

// 获取用户信息
const { userInfo } = storeToRefs(useUserStore());
// 当前分类
const activeCategory = ref(0);
// 商城列表
const goodsList = ref<IDictI[]>([]);

// 下单对话框 ref对象
const placeOrderRef = ref<InstanceType<typeof PlaceAnOrderDialog>>();
// 当前操作的商品
const activeGoods = ref<IPointsGoods>();

/**
 * 点击商品
 */
const clickGoods = (goods: IPointsGoods) => {
	activeGoods.value = goods;
	placeOrderRef.value.open();
};

/**
 * 获取商品分类
 */
const getGoodsCategory = async () => {
	const { data } = await pointsGetPointsGoodsCategory();
	goodsList.value = data.map(item => ({ ...item, page: 1, rows: 10, list: [], total: 0 }));
	goodsList.value.unshift({ id: -1, name: "全部", page: 1, rows: 10, list: [], total: 0 });
};

/**
 * 获取商品列表
 */
const getGoodsList = async () => {
	const active = goodsList.value[activeCategory.value];
	const { data } = await pointsGetPointsGoodsList({ page: active.page, rows: active.rows, exchangeGoodsCategoryId: active.id as number });
	active.list = data.list;
	active.total = data.total;
};

onMounted(async () => {
	await getGoodsCategory();
	getGoodsList();
});
</script>

<style scoped lang="scss">
.point-box {
	.btn-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		padding-bottom: 6px;
		margin-bottom: 10px;
		background-color: #ffffff;
		border-radius: 4px;
		.btn-box-item {
			padding-right: 40px;
		}
		.btn-box-item > .btn {
			width: 80px;
			height: 32px;
			margin-right: 14px;
			margin-bottom: 10px;
			margin-left: 0;
			font-size: 14px;
			&:hover {
				color: var(--el-button-text-color);
				background-color: var(--el-button-bg-color);
				border-color: var(--el-button-border-color);
			}
			&.active {
				color: #ffffff;
				background-color: #c39f63;
				border: 0;
			}
		}
		.my-points {
			display: flex;
			align-items: center;
			width: 20%;
			font-size: 16px;
			text-align: right;
			span {
				font-size: 28px;
				color: #c39f63;
			}
		}
	}
	.goods-list {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 796px;
		padding: 20px;
		background-color: #ffffff;
		.el-pagination {
			justify-content: flex-end;
		}
	}
	.content-box {
		display: flex;
		flex-wrap: wrap;
		.content-item {
			display: flex;
			flex-direction: column;
			width: 23.5%;
			height: 346px;
			margin-right: 2%;
			margin-bottom: 20px;
			&:nth-child(4n) {
				margin-right: 0;
			}
			.el-image {
				width: 100%;
				height: 252px;
			}
			.title-box {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: calc(100% - 252px);
				padding: 12px;
				background-color: #ffffff;
				border: 1px solid #dedede;
				p {
					padding: 0;
					margin: 0;
				}
				.title-btn-box {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					span {
						color: #8a1313;
					}
					.el-button {
						--el-button-border-color: #8a1313;
						--el-text-color-regular: #8a1313;
						--el-color-primary: #8a1313;
						--el-color-primary-light-7: #8a1313;
					}
				}
			}
		}
	}
	.el-table {
		--el-bg-color: #f3ece0;
		--el-table-header-text-color: #c39f63;
	}
}
</style>
